<template>
  <el-container>
    <el-header style="background-color: #fff" class="top">
      <div class="bianhao">
        <span>工单编号：</span>
        <div class="input">
          <el-input v-model="input" placeholder="请输入"></el-input>
        </div>
      </div>
      <div class="bianhao">
        <span>工单状态：</span>
        <div class="input">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="query"
          >查询</el-button
        >
      </div>
    </el-header>
    <el-main class="main">
      <div class="bottom-top">
        <el-button class="xj" @click="xinjian"
          ><div>
            <i class="el-icon-circle-plus-outline"></i> <span>新建</span>
          </div></el-button
        >
      </div>

      <div class="bottom-main">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="taskCode" label="工单编号" width="180">
          </el-table-column>
          <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
          <el-table-column prop="taskType.typeName" label="工单类型">
          </el-table-column>
          <el-table-column label="工单方式">
            <template slot-scope="scope">
              {{ scope.row.createType ? '手动' : '自动' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单状态"
          >
          </el-table-column>
          <el-table-column prop="userName" label="运营人员"> </el-table-column>
          <el-table-column prop="createTime" label="创建日期">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button @click="handleClick(row)" type="text" size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="bottom-bottom">
        <span class="jl"
          >共{{ totalCount }}条记录 第{{ pageIndex }}/{{ totalPage }}页</span
        >
        <el-button-group class="button">
          <el-button-group>
            <el-button
              icon="el-icon-arrow-left"
              class="right"
              :disabled="pageIndex === 1 ? true : false"
              @click="previous"
              >上一页</el-button
            >
            <el-button @click="next"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
        </el-button-group>
      </div>
    </el-main>
    <!-- 新增 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <el-form-item prop="innerCode" label="设备编号:" placeholder="请输入"
          ><el-input v-model="form.innerCode" @change="changNumber"
        /></el-form-item>
        <el-form-item
          prop="productTypeId"
          label="工单类型:"
          placeholder="请选择"
        >
          <el-select v-model="form.productTypeId" placeholder="请选择">
            <el-option
              v-for="item in taskType"
              :key="item.typeName"
              :label="item.typeName"
              :value="item.typeName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="assignorId" label="运维人员:">
          <el-select placeholder="请选择" v-model="form.assignorId">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="desc" label="备注:"
          ><el-input
            type="textarea"
            placeholder="请输入备注（不超过40字）"
            maxlength="40"
            show-word-limit
            v-model="form.desc"
        /></el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="add">确定</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog
      class="dialog"
      title="工单详情"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <div class="pic">
        <el-row type="flex" justify="space-around" align="middle">
          <el-col
            ><img src="@/assets/pic2.png" alt="" /><span>取消</span></el-col
          >
          <el-col :span="10"><img src="@/assets/pic1.png" alt="" /></el-col>
        </el-row>
      </div>
      <el-descriptions :column="2" direction="horizontal" class="descriptions">
        <el-descriptions-item label="设备编号">{{
          form1.innerCode
        }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{
          form1.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="取消日期">{{
          form1.updateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="运营人员">{{
          form1.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="工单类型">补货工单</el-descriptions-item>
        <el-descriptions-item label="工单方式">{{
          form1.createType ? '手动' : '自动'
        }}</el-descriptions-item>
        <el-descriptions-item
          :label="form1.statusName === '取消' ? '备注' : '取消原因'"
          >{{ form1.desc }}</el-descriptions-item
        >
      </el-descriptions>
      <el-row type="flex" justify="space-around">
        <el-col :span="5">
          <el-button type="info" plain @click="cxcj"> 重新创建 </el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  getTaskStatus,
  getTaskList1,
  getTaskAll,
  getOperatorList,
  setWorkList,
  getTaskInfo,
  cancelWorkList
} from '@/api/work'

export default {
  name: 'maintain-page',
  data() {
    return {
      input: '',
      options: [],
      options1: [],
      value: '',
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      totalCount: 0,
      taskType: [],
      userList: [],
      form: {
        assignorId: null,
        createType: 1,
        desc: '',
        details: [],
        innerCode: '',
        productTypeId: '',
        userId: 1
      },
      rules: {
        innerCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        productTypeId: [{ required: true, message: '请输入', trigger: 'blur' }],
        assignorId: [{ required: true, message: '请输入', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      form1: {},
      title: '',
      taskId: null
    }
  },
  methods: {
    // 获取这一面数据
    async getList() {
      const res = await getTaskList1(this.pageIndex, this.pageSize)
      this.tableData = res.currentPageRecords
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
      // console.log(this.tableData)
    },
    // 上一页
    previous() {
      this.pageIndex--
      this.getList()
    },
    // 下一页
    next() {
      this.pageIndex++
      this.getList()
    },
    // 查询
    async query() {
      // console.log(this.input, this.value)
      const res = await getTaskList1(
        this.pageIndex,
        this.pageSize,
        this.input,
        this.value
      )
      this.tableData = res.currentPageRecords
      if (res.totalPage === '0') {
        this.totalPage = 1
      } else {
        this.totalPage = res.totalPage
      }
      console.log(res)
      this.totalCount = res.totalCount
    },
    // 关闭
    close() {
      this.dialogVisible = false
    },
    // 点击新建
    xinjian() {
      this.title = '新增工单'
      this.dialogVisible = true
    },
    // 新建
    async add() {
      if (this.form.productTypeId === '投放工单') {
        this.form.productTypeId = 1
      } else if (this.form.productTypeId === '维修工单') {
        this.form.productTypeId = 3
      } else if (this.form.productTypeId === '撤机工单') {
        this.form.productTypeId = 4
      }
      this.close()
      try {
        this.$refs.form.resetFields()
        await this.$refs.form.validate()
        if (this.title === '新增') {
          await setWorkList(this.form)
          this.$message.success('新增成功')
        } else {
          await cancelWorkList(this.form1.taskId)
          this.$message.success('编辑成功')
        }
        this.close()
        this.getList()
      } catch (error) {
        if (this.form.productTypeId === 1) {
          this.form.productTypeId = '投放工单'
        } else if (this.form.productTypeId === 3) {
          this.form.productTypeId = '维修工单'
        } else if (this.form.productTypeId === 4) {
          this.form.productTypeId = '撤机工单'
        }
        this.$message.error(`${error.response.data}`)
      }
    },
    // 点击关闭新建
    handleClose() {
      this.close()
    },
    // 输入设备编号 获得运维人员
    async changNumber() {
      this.userList = []
      this.userList = await getOperatorList(this.form.innerCode)
      // console.log(this.userList)
    },
    // 点击查看详情
    async handleClick(row) {
      // console.log(row)
      this.form1 = { ...row }
      this.statusId = this.form1.taskStatusTypeEntity.statusId
      console.log(this.statusId)
      const res = await getTaskInfo(this.form1.taskId)
      //  assignorId: null,
      //   createType: 1,
      //   desc: '',
      //   details: [],
      //   innerCode: '',
      //   productTypeId: '',
      //   userId: 1
      this.form.assignorId = res.assignorId
      this.form.createType = res.createType
      this.form.desc = res.desc
      this.form.innerCode = res.innerCode
      this.form.productTypeId = res.productTypeId
      this.form.userId = res.userId
      if (this.form.productTypeId === 1) {
        this.form.productTypeId = '投放工单'
      } else if (this.form.productTypeId === 3) {
        this.form.productTypeId = '维修工单'
      } else if (this.form.productTypeId === 4) {
        this.form.productTypeId = '撤机工单'
      }
      this.dialogVisible1 = true
    },
    // 重新创建
    cxcj() {
      this.title = '重新创建'
      this.dialogVisible = true
    }
  },
  async created() {
    this.options = await getTaskStatus()
    this.taskType = await getTaskAll()
    this.getList()
    this.taskType.splice(1, 1)
    // console.log(this.options)
    // console.log(this.taskType)
  }
}
</script>

<style scoped lang="scss">
::v-deep .top {
  width: 1650px;
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .bianhao {
    display: flex;
    align-items: center;
    margin-right: 20px;
    .input {
      height: 36px;
      width: 205px;
    }
    span {
      font-size: 14px;
    }
  }
}

::v-deep .main {
  width: 1650px !important;
  //   height: 600px;
  background-color: #fff;

  .bottom-top {
    display: flex;
    height: 36px;
    padding: 20px 15px 0px 8px;
    background-color: #fff;
    .xj {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 36px;
      margin-left: 0px;
      border: none;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      color: #fff;
    }
    .gdpz {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fbf4f0 !important;
      height: 36px;
      width: 80px;
      margin-left: 10px;
      border: none;
      color: #655b56 !important;
    }
  }
  .bottom-main {
    margin-top: 30px;
  }
  .bottom-bottom {
    display: flex;
    justify-content: center;
    position: relative;
    // align-items: center;
    margin: 40px 0px 40px 0px;
    color: #dbdfe5;
    .jl {
      font: 16px;
      position: absolute;
      top: 0px;
      left: 0;
      width: 300px;
    }
    .button {
      position: absolute;
      top: -10px;
      right: 150px;
      .right {
        position: absolute;
        top: 0px;
        right: 150px;
      }
    }
  }
}

table {
  border-collapse: separate;
  text-indent: initial;
  border-spacing: 0px;
}

.pic {
  width: 100%;
  background-color: #ececec63;
  span {
    color: #000000d9;
    font: 14px;
    margin-left: 16px;
  }
}
.descriptions {
  margin-top: 30px;
  margin-left: 46px;
  text-align: center;
}
</style>
